<template>
  <div class="grouping_water">
    <el-row class="all_main" :gutter="20">
      <dragdrop :width="0" :widthLeft="'140px'">
        <template slot="left">
          <div class="all_left">
            <el-table
              :data="groupList"
              ref="table"
              highlight-current-row
              @row-click="rowClick"
              border
              style="width: 100%"
              :header-cell-style="headFirst"
              height="calc(100vh - 130px)"
            >
              <el-table-column align="center" prop="groupName" label="身份/分组"></el-table-column>
            </el-table>
          </div>
        </template>
        <template slot="right">
          <div class="all_right">
            <el-form :inline="true" :model="elform" class="demo-form-inline" size="mini">
              <myTime @handleGetTime="handleGetTime"></myTime>
              <el-form-item class="searchmarigin">
                <el-button
                  type="primary"
                  @click="onSubmit"
                  size="mini"
                  icon="el-icon-search"
                  v-if="activeName == 'first' ? true : false"
                >查询</el-button>
                <el-button
                  type="primary"
                  @click="DailySubmit"
                  size="mini"
                  icon="el-icon-search"
                  v-if="activeName == 'third' ? true : false"
                >查询</el-button>
                <el-button
                  type="primary"
                  @click="DetailsonSubmit"
                  size="mini"
                  icon="el-icon-search"
                  v-if="activeName == 'second' ? true : false"
                >查询</el-button>

                <el-button
                  type="primary"
                  @click="onExport"
                  size="mini"
                  icon="el-icon-document-copy"
                  v-if="activeName == 'first' ? true : false"
                >导出</el-button>
                <el-button
                  type="primary"
                  @click="onDailyExport"
                  size="mini"
                  icon="el-icon-document-copy"
                  v-if="activeName == 'third' ? true : false"
                >导出</el-button>
                <el-button
                  type="primary"
                  @click="DetailsonExport"
                  size="mini"
                  icon="el-icon-document-copy"
                  v-if="activeName == 'second' ? true : false"
                >导出</el-button>
                <el-button
                  type="primary"
                  @click="onExport('print')"
                  size="mini"
                  icon="el-icon-printer"
                  v-if="activeName == 'first' ? true : false"
                >打印</el-button>
                <el-button
                  type="primary"
                  @click="onDailyExport('print')"
                  size="mini"
                  icon="el-icon-printer"
                  v-if="activeName == 'third' ? true : false"
                >打印</el-button>
                <el-button
                  type="primary"
                  @click="DetailsonExport('print')"
                  size="mini"
                  icon="el-icon-printer"
                  v-if="activeName == 'second' ? true : false"
                >打印</el-button>
              </el-form-item>
              <el-form-item v-if="activeName == 'first' ? true : false">
                <el-popover width="550" placement="top" trigger="click">
                  <el-row>
                    <el-checkbox
                      style="width: 20%"
                      @change="checkboxChanged()"
                      :label="formThead.groupName.label"
                      v-model="formThead.groupName.checked"
                    ></el-checkbox>
                    <el-checkbox
                      style="width: 20%"
                      @change="checkboxChanged()"
                      :label="formThead.consumeWaterAmountSum.label"
                      v-model="formThead.consumeWaterAmountSum.checked"
                    ></el-checkbox>
                    <el-checkbox
                      style="width: 20%"
                      @change="checkboxChanged()"
                      :label="formThead.waterAmountSum.label"
                      v-model="formThead.waterAmountSum.checked"
                    ></el-checkbox>
                  </el-row>
                  <el-row>
                    <el-checkbox
                      style="width: 20%"
                      @change="checkboxChanged()"
                      :label="formThead.expenditureSum.label"
                      v-model="formThead.expenditureSum.checked"
                    ></el-checkbox>
                    <el-checkbox
                      style="width: 20%"
                      @change="checkboxChanged()"
                      :label="formThead.expenditureMax.label"
                      v-model="formThead.expenditureMax.checked"
                    ></el-checkbox>
                    <el-checkbox
                      style="width: 20%"
                      @change="checkboxChanged()"
                      :label="formThead.expenditureMin.label"
                      v-model="formThead.expenditureMin.checked"
                    ></el-checkbox>
                  </el-row>
                  <el-row>
                    <el-checkbox
                      style="width: 20%"
                      @change="checkboxChanged()"
                      :label="formThead.waterAmountMax.label"
                      v-model="formThead.waterAmountMax.checked"
                    ></el-checkbox>
                    <el-checkbox
                      style="width: 20%"
                      @change="checkboxChanged()"
                      :label="formThead.waterAmountMin.label"
                      v-model="formThead.waterAmountMin.checked"
                    ></el-checkbox>
                    <el-checkbox
                      style="width: 20%"
                      @change="checkboxChanged()"
                      :label="formThead.userCount.label"
                      v-model="formThead.userCount.checked"
                    ></el-checkbox>
                  </el-row>
                  <el-row>
                    <el-checkbox
                      style="width: 20%"
                      @change="checkboxChanged()"
                      :label="formThead.amountCount.label"
                      v-model="formThead.amountCount.checked"
                    ></el-checkbox>
                  </el-row>
                  <el-button
                    slot="reference"
                    size="mini"
                    type="primary"
                    icon="el-icon-edit-outline"
                  >自定义</el-button>
                </el-popover>
              </el-form-item>
              <el-form-item v-if="activeName == 'third' ? true : false">
                <el-popover width="550" placement="top" trigger="click">
                  <el-row>
                    <!-- <el-checkbox
              style="width: 20%"
              @change="checkboxChanged3()"
              :label="formThead3.dataMakeTime.label"
              v-model="formThead3.dataMakeTime.checked"
                    ></el-checkbox>-->
                    <el-checkbox
                      style="width: 20%"
                      @change="checkboxChanged3()"
                      :label="formThead3.consumeWaterAmountSum.label"
                      v-model="formThead3.consumeWaterAmountSum.checked"
                    ></el-checkbox>
                    <el-checkbox
                      style="width: 20%"
                      @change="checkboxChanged3()"
                      :label="formThead3.waterAmountSum.label"
                      v-model="formThead3.waterAmountSum.checked"
                    ></el-checkbox>
                    <el-checkbox
                      style="width: 20%"
                      @change="checkboxChanged3()"
                      :label="formThead3.amountCount.label"
                      v-model="formThead3.amountCount.checked"
                    ></el-checkbox>
                  </el-row>
                  <el-row>
                    <el-checkbox
                      style="width: 20%"
                      @change="checkboxChanged3()"
                      :label="formThead3.expenditureSum.label"
                      v-model="formThead3.expenditureSum.checked"
                    ></el-checkbox>
                    <el-checkbox
                      style="width: 20%"
                      @change="checkboxChanged3()"
                      :label="formThead3.expenditureMax.label"
                      v-model="formThead3.expenditureMax.checked"
                    ></el-checkbox>
                    <el-checkbox
                      style="width: 20%"
                      @change="checkboxChanged3()"
                      :label="formThead3.expenditureMin.label"
                      v-model="formThead3.expenditureMin.checked"
                    ></el-checkbox>
                  </el-row>
                  <el-row>
                    <el-checkbox
                      style="width: 20%"
                      @change="checkboxChanged3()"
                      :label="formThead3.waterAmountMax.label"
                      v-model="formThead3.waterAmountMax.checked"
                    ></el-checkbox>
                    <el-checkbox
                      style="width: 20%"
                      @change="checkboxChanged3()"
                      :label="formThead3.waterAmountMin.label"
                      v-model="formThead3.waterAmountMin.checked"
                    ></el-checkbox>
                    <el-checkbox
                      style="width: 20%"
                      @change="checkboxChanged3()"
                      :label="formThead3.userCount.label"
                      v-model="formThead3.userCount.checked"
                    ></el-checkbox>
                  </el-row>
                  <el-row></el-row>
                  <el-button
                    slot="reference"
                    size="mini"
                    type="primary"
                    icon="el-icon-edit-outline"
                  >自定义</el-button>
                </el-popover>
              </el-form-item>
              <el-form-item v-if="activeName == 'second' ? true : false">
                <el-popover width="500" placement="top" trigger="click">
                  <el-row>
                    <el-checkbox
                      style="width: 10%"
                      @change="checkboxChanged2()"
                      :label="formThead2.cardNumber.label"
                      v-model="formThead2.cardNumber.checked"
                    ></el-checkbox>
                    <el-checkbox
                      style="width: 10%"
                      @change="checkboxChanged2()"
                      :label="formThead2.userName.label"
                      v-model="formThead2.userName.checked"
                    ></el-checkbox>
                    <el-checkbox
                      style="width: 10%"
                      @change="checkboxChanged2()"
                      :label="formThead2.userNumber.label"
                      v-model="formThead2.userNumber.checked"
                    ></el-checkbox>
                    <el-checkbox
                      style="width: 10%"
                      @change="checkboxChanged2()"
                      :label="formThead2.dataMakeTime.label"
                      v-model="formThead2.dataMakeTime.checked"
                    ></el-checkbox>
                  </el-row>
                  <el-row>
                    <el-checkbox
                      style="width: 10%"
                      @change="checkboxChanged2()"
                      :label="formThead2.waterAmount.label"
                      v-model="formThead2.waterAmount.checked"
                    ></el-checkbox>
                    <!-- <el-checkbox
                    style="width: 10%"
                    @change="checkboxChanged2()"
                    :label="formThead2.surplusAmount.label"
                    v-model="formThead2.surplusAmount.checked"
                    ></el-checkbox>-->
                    <el-checkbox
                      style="width: 10%"
                      @change="checkboxChanged2()"
                      :label="formThead2.expenditure.label"
                      v-model="formThead2.expenditure.checked"
                    ></el-checkbox>
                    <el-checkbox
                      style="width: 10%"
                      @change="checkboxChanged2()"
                      :label="formThead2.newBalance.label"
                      v-model="formThead2.newBalance.checked"
                    ></el-checkbox>
                    <el-checkbox
                      style="width: 10%"
                      @change="checkboxChanged2()"
                      :label="formThead2.useType.label"
                      v-model="formThead2.useType.checked"
                    ></el-checkbox>
                  </el-row>
                  <el-row>
                    <el-checkbox
                      style="width: 10%"
                      @change="checkboxChanged2()"
                      :label="formThead2.serialNumber.label"
                      v-model="formThead2.serialNumber.checked"
                    ></el-checkbox>
                    <el-checkbox
                      style="width: 10%"
                      @change="checkboxChanged2()"
                      :label="formThead2.terminalName.label"
                      v-model="formThead2.terminalName.checked"
                    ></el-checkbox>
                    <el-checkbox
                      style="width: 10%"
                      @change="checkboxChanged2()"
                      :label="formThead2.terminalCode.label"
                      v-model="formThead2.terminalCode.checked"
                    ></el-checkbox>
                  </el-row>
                  <el-button
                    slot="reference"
                    size="mini"
                    type="primary"
                    icon="el-icon-edit-outline"
                  >自定义</el-button>
                </el-popover>
              </el-form-item>
            </el-form>
            <el-tabs type="border-card" v-model="activeName">
              <el-tab-pane label="用水汇总" name="first">
                <el-table
                  v-loading="loading"
                  :data="detailslist"
                  ref="table"
                  border
                  highlight-current-row
                  style="width: 100%"
                  :header-cell-style="headFirst"
                  :cell-style="
                    detailsTotal
                      ? (res) => headFirst_col(res, detailslist)
                      : () => {}
                  "
                >
                  <el-table-column
                    prop="groupName"
                    label="身份/分组"
                    v-if="formThead.groupName.checked"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="consumeWaterAmountSum"
                    label="消费用水量(升)"
                    v-if="formThead.consumeWaterAmountSum.checked"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="waterAmountSum"
                    label="总用水量(升)"
                    v-if="formThead.waterAmountSum.checked"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="expenditureSum"
                    label="总消费金额(元)"
                    v-if="formThead.expenditureSum.checked"
                    align="center"
                    min-width="120px"
                  >
                    <template slot-scope="scope">
                      <div>{{ scope.row.expenditureSum | amountyuan }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="expenditureMax"
                    label="单次消费最大金额(元)"
                    v-if="formThead.expenditureMax.checked"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <div>{{ scope.row.expenditureMax | amountyuan }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="expenditureMin"
                    label="单次消费最小金额(元)"
                    v-if="formThead.expenditureMin.checked"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <div>{{ scope.row.expenditureMin | amountyuan }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="waterAmountMax"
                    label="单次最大用水量(升)"
                    v-if="formThead.waterAmountMax.checked"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="waterAmountMin"
                    label="单次最小用水量(升)"
                    v-if="formThead.waterAmountMin.checked"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="userCount"
                    label="使用人数"
                    v-if="formThead.userCount.checked"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="amountCount"
                    label="使用次数"
                    v-if="formThead.amountCount.checked"
                    align="center"
                  ></el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="每日用水汇总" name="third">
                <el-table
                  ref="detailslist3"
                  :data="detailslist3"
                  border
                  highlight-current-row
                  row-key="id"
                  :tree-props="{
                    children: 'dayList',
                    hasChildren: 'hasChildren',
                  }"
                  :header-cell-style="headFirst"
                  style="width: 100%"
                  v-loading="loading3"
                  :cell-style="
                    detailsDailyTotal
                      ? (res) => headFirst_col(res, headerArr)
                      : () => {}
                  "
                >
                  <el-table-column
                    prop="groupName"
                    label="身份/分组"
                    v-if="formThead3.groupName.checked"
                    min-width="140px"
                  ></el-table-column>

                  <el-table-column
                    prop="dataMakeTime"
                    label="日期"
                    v-if="formThead3.dataMakeTime.checked"
                    align="center"
                    min-width="90px"
                  ></el-table-column>
                  <el-table-column
                    prop="consumeWaterAmountSum"
                    label="消费用水量(升)"
                    v-if="formThead3.consumeWaterAmountSum.checked"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="waterAmountSum"
                    label="总用水量(升)"
                    v-if="formThead3.waterAmountSum.checked"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="expenditureSum"
                    label="总消费金额(元)"
                    v-if="formThead3.expenditureSum.checked"
                    align="center"
                    min-width="120px"
                  >
                    <template slot-scope="scope">
                      <div>{{ scope.row.expenditureSum | amountyuan }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="expenditureMax"
                    label="单次消费最大金额(元)"
                    v-if="formThead3.expenditureMax.checked"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <div>{{ scope.row.expenditureMax | amountyuan }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="expenditureMin"
                    label="单次消费最小金额(元)"
                    v-if="formThead3.expenditureMin.checked"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <div>{{ scope.row.expenditureMin | amountyuan }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="waterAmountMax"
                    label="单次最大用水量(升)"
                    v-if="formThead3.waterAmountMax.checked"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="waterAmountMin"
                    label="单次最小用水量(升)"
                    v-if="formThead3.waterAmountMin.checked"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="userCount"
                    label="使用人数"
                    v-if="formThead3.userCount.checked"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="amountCount"
                    label="使用次数"
                    v-if="formThead3.amountCount.checked"
                    align="center"
                  ></el-table-column>
                </el-table>
                <div class="page">
                  <el-pagination
                    @size-change="handleSizeChange3"
                    @current-change="handleCurrentChangepage3"
                    :current-page="currentPage3"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize3"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="recordCount3"
                  ></el-pagination>
                </div>
              </el-tab-pane>
              <el-tab-pane label="用水明细" name="second">
                <el-table
                  v-loading="loading2"
                  :data="detailslist2"
                  ref="detailslist2"
                  border
                  highlight-current-row
                  style="width: 100%"
                  :header-cell-style="headFirst"
                  :cell-style="
                    ermainaldeTotal
                      ? (res) => headFirst_col(res, detailslist2)
                      : () => {}
                  "
                >
                  <el-table-column
                    prop="cardNumber"
                    label="卡号"
                    v-if="formThead2.cardNumber.checked"
                    min-width="110px"
                  ></el-table-column>
                  <el-table-column prop="userName" label="姓名" v-if="formThead2.userName.checked"></el-table-column>
                  <el-table-column
                    prop="userNumber"
                    label="人员编号"
                    v-if="formThead2.userNumber.checked"
                    min-width="110px"
                  ></el-table-column>
                  <el-table-column
                    prop="dataMakeTime"
                    label="操作时间"
                    v-if="formThead2.dataMakeTime.checked"
                    width="160"
                  ></el-table-column>
                  <el-table-column
                    prop="waterAmount"
                    label="使用水量"
                    v-if="formThead2.waterAmount.checked"
                  ></el-table-column>
                  <el-table-column
                    prop="expenditure"
                    label="消费金额(元)"
                    v-if="formThead2.expenditure.checked"
                  >
                    <template slot-scope="scope">
                      <div>{{ scope.row.expenditure | amountyuan }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="newBalance"
                    label="剩余金额(元)"
                    v-if="formThead2.newBalance.checked"
                  >
                    <template slot-scope="scope">
                      <div>{{ scope.row.newBalance | amountyuan }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="useType" label="交易类型" v-if="formThead2.useType.checked">
                    <template slot-scope="scope">
                      {{
                      scope.row.useType | filterchargingType
                      }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="serialNumber"
                    label="卡片流水号"
                    v-if="formThead2.serialNumber.checked"
                  ></el-table-column>
                  <el-table-column
                    prop="terminalName"
                    label="设备名称"
                    v-if="formThead2.terminalName.checked"
                  ></el-table-column>
                  <el-table-column
                    prop="terminalCode"
                    label="设备编号"
                    v-if="formThead2.terminalCode.checked"
                  ></el-table-column>
                  <!-- <el-table-column
                    prop="pulseFlag"
                    label="是否有脉冲"
                    v-if="formThead2.pulseFlag.checked"
                  >
                    <template slot-scope="scope">
                      <div>{{scope.row.pulseFlag | filterpulseFlag}}</div>
                    </template>
                  </el-table-column>-->
                </el-table>
                <div class="page">
                  <el-pagination
                    @size-change="handleSizeChange2"
                    @current-change="handleCurrentChangepage2"
                    :current-page="currentPage2"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize2"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="recordCount2"
                  ></el-pagination>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </template>
      </dragdrop>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      elform: {},
      groupGuid: '',
      radio: 4,
      activeName: 'first',
      deptTree: [],
      detailsTotal: null,
      detailslist: [],
      loading: false,
      pageNum: 1,
      pageSize: 20,
      searchInfo: {},
      currentPage: 0,
      recordCount: 0,
      startDate: '',
      endDate: '',
      startTime: '',
      endTime: '',
      exportlist: [],
      filename: '身份/分组用水汇总',
      groupList: [],
      formThead: {
        groupName: { label: '身份/分组', prop: 'groupName', checked: true },
        consumeWaterAmountSum: {
          label: '消费用水量(升)',
          prop: 'consumeWaterAmountSum',
          checked: true
        },
        waterAmountSum: {
          label: '总用水量(升)',
          prop: 'waterAmountSum',
          checked: true
        },

        expenditureSum: {
          label: '总消费金额(元)',
          prop: 'expenditureSum',
          checked: true
        },
        expenditureMax: {
          label: '单次最大消费金额(元)',
          prop: 'expenditureMax',
          checked: true
        },
        expenditureMin: {
          label: '单次最小消费金额(元)',
          prop: 'expenditureMin',
          checked: true
        },
        waterAmountMax: {
          label: '单次最大用水量(升)',
          prop: 'waterAmountMax',
          checked: true
        },

        waterAmountMin: {
          label: '单次最小用水量(升)',
          prop: 'waterAmountMin',
          checked: true
        },
        userCount: { label: '使用人数', prop: 'userCount', checked: true },
        amountCount: { label: '使用次数', prop: 'amountCount', checked: true }
      },

      //用水明细
      loading2: false,
      ermainaldeTotal: null,
      detailslist2: [],
      formThead2: {
        cardNumber: { label: '卡号', prop: 'cardNumber', checked: true },
        userName: { label: '姓名', prop: 'userName', checked: true },
        userNumber: { label: '人员编号', prop: 'userNumber', checked: true },
        dataMakeTime: {
          label: '操作时间',
          prop: 'dataMakeTime',
          checked: true
        },
        waterAmount: { label: '使用水量', prop: 'waterAmount', checked: true },
        // surplusAmount: {
        //   label: '剩余水量',
        //   prop: 'surplusAmount',
        //   checked: true
        // },
        expenditure: {
          label: '消费金额(元)',
          prop: 'expenditure',
          checked: true
        },
        newBalance: {
          label: '剩余金额(元)',
          prop: 'newBalance',
          checked: true
        },
        useType: { label: '交易类型', prop: 'useType', checked: true },
        serialNumber: {
          label: '卡片流水号',
          prop: 'serialNumber',
          checked: true
        },
        terminalName: {
          label: '设备名称',
          prop: 'terminalName',
          checked: true
        },
        terminalCode: {
          label: '设备编号',
          prop: 'terminalCode',
          checked: true
        },
        pulseFlag: { label: '是否有脉冲', prop: 'pulseFlag', checked: false }
      },
      pageNum2: 1,
      pageSize2: 20,
      searchInfo2: {},
      currentPage2: 0,
      recordCount2: 0,
      exportlist2: [],
      filename2: '身份/分组用水明细表',

      // 分组每日用水明细表
      loading3: false,
      detailsDailyTotal: null,
      detailslist3: [],
      formThead3: {
        groupName: {
          label: '身份/分组',
          prop: 'groupName',
          checked: true
        },
        dataMakeTime: { label: '日期', prop: 'dataMakeTime', checked: true },
        consumeWaterAmountSum: {
          label: '消费用水量(升)',
          prop: 'consumeWaterAmountSum',
          checked: true
        },
        waterAmountSum: {
          label: '总用水量(升)',
          prop: 'waterAmountSum',
          checked: true
        },

        expenditureSum: {
          label: '总消费金额(元)',
          prop: 'expenditureSum',
          checked: true
        },
        expenditureMax: {
          label: '单次最大消费金额(元)',
          prop: 'expenditureMax',
          checked: true
        },
        expenditureMin: {
          label: '单次最小消费金额(元)',
          prop: 'expenditureMin',
          checked: true
        },
        waterAmountMax: {
          label: '单次最大用水量(升)',
          prop: 'waterAmountMax',
          checked: true
        },

        waterAmountMin: {
          label: '单次最小用水量(升)',
          prop: 'waterAmountMin',
          checked: true
        },
        userCount: { label: '使用人数', prop: 'userCount', checked: true },
        amountCount: { label: '使用次数', prop: 'amountCount', checked: true }
      },
      pageNum3: 1,
      pageSize3: 20,
      searchInfo3: {},
      currentPage3: 0,
      recordCount3: 0,
      exportlist3: [],
      filename3: '身份/分组每日用水明细表'
    }
  },
  created() {
    this.startDate = this.getNowTime('yy-mm-dd')
    this.endDate = this.getNowTime('yy-mm-dd')
    this.startTime = ''
    this.endTime = ''
    this.timechange(1)
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid
      }
    }
  },
  mounted() {
    this.getGroupList()
  },
  filters: {
    filterpulseFlag: function(pulseFlag) {
      if (pulseFlag == 0) {
        return (pulseFlag = '是')
      }
      if (cardState == 1) {
        return (cardState = '否')
      }
    }
  },
  methods: {
    handleGetTime(val) {
      console.log(val)
      this.startDate = val.startDate
      this.endDate = val.endDate
      this.startTime = val.startTime
      this.endTime = val.endTime
      this.radio = val.timeradio
    },
    //获取分组列表
    getGroupList() {
      this.$http({
        url: this.$http.adornUrl('/unit/unit-user-group-list'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: this.changeschoolid,
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.groupList = data.messageContent
        }
      })
    },
    //时间格式
    timechange(val) {
      if (val == 1) {
        var date = new Date()
        var seperator1 = '-'
        var seperator2 = ':'
        //以下代码依次是获取当前时间的年月日时分秒
        var year = date.getFullYear()
        var month = date.getMonth() + 1
        var strDate = date.getDate()
        var minute = date.getMinutes()
        var hour = date.getHours()
        var second = date.getSeconds()
        //固定时间格式
        if (month >= 1 && month <= 9) {
          month = '0' + month
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = '0' + strDate
        }
        if (hour >= 0 && hour <= 9) {
          hour = '0' + hour
        }
        if (minute >= 0 && minute <= 9) {
          minute = '0' + minute
        }
        if (second >= 0 && second <= 9) {
          second = '0' + second
        }
        let timeArr = []
        this.startDate = year + seperator1 + month + seperator1 + strDate
        this.endDate = year + seperator1 + month + seperator1 + strDate
        this.startTime = '' + 0 + 0 + ':' + 0 + 0 + ':' + 0 + 0
        this.endTime = +23 + ':' + 59 + ':' + 59
      }
      if (val == 2) {
        var now = new Date() //当前日期
        var nowDayOfWeek = now.getDay() //今天本周的第几天
        var nowDay = now.getDate() + 1 //当前日
        var nowMonth = now.getMonth() //当前月
        var nowYear = now.getYear() //当前年
        nowYear += nowYear < 2000 ? 1900 : 0 //
        var weekStartDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek)
        var weekEndDate = new Date(
          nowYear,
          nowMonth,
          nowDay + (6 - nowDayOfWeek)
        )
        this.startDate = this.formatDate(weekStartDate)
        this.endDate = this.formatDate(weekEndDate)
        this.startTime = '' + 0 + 0 + ':' + 0 + 0 + ':' + 0 + 0
        this.endTime = +23 + ':' + 59 + ':' + 59
        console.log(this.startDate)
        console.log(this.endDate)
      }
      if (val == 3) {
        var date = new Date()
        date.setDate(1)
        var month = parseInt(date.getMonth() + 1)
        var day = date.getDate()
        if (month < 10) {
          month = '0' + month
        }
        if (day < 10) {
          day = '0' + day
        }
        this.startDate = date.getFullYear() + '-' + month + '-' + day
        this.startTime = '' + 0 + 0 + ':' + 0 + 0 + ':' + 0 + 0
        console.log(this.startTime)
        var date2 = new Date()
        var currentMonth = date2.getMonth()
        var nextMonth = ++currentMonth
        var nextMonthFirstDay = new Date(date2.getFullYear(), nextMonth, 1)
        var oneDay = 1000 * 60 * 60 * 24
        var lastTime = new Date(nextMonthFirstDay - oneDay)
        var month = parseInt(lastTime.getMonth() + 1)
        var day = lastTime.getDate()
        if (month < 10) {
          month = '0' + month
        }
        if (day < 10) {
          day = '0' + day
        }
        this.endDate = date2.getFullYear() + '-' + month + '-' + day
        this.endTime = +23 + ':' + 59 + ':' + 59
      }
    },
    formatDate(date) {
      var myyear = date.getFullYear()
      var mymonth = date.getMonth() + 1
      var myweekday = date.getDate()

      if (mymonth < 10) {
        mymonth = '0' + mymonth
      }
      if (myweekday < 10) {
        myweekday = '0' + myweekday
      }
      return myyear + '-' + mymonth + '-' + myweekday
    },
    changeradio(radio) {
      this.radio = radio
      if (this.radio == 1) {
        this.timechange(1)
      }
      if (this.radio == 2) {
        this.timechange(2)
      }
      if (this.radio == 3) {
        this.timechange(3)
      }
      if (this.radio == 4) {
        this.startDate = ''
        this.endDate = ''
        this.startTime = ''
        this.endTime = ''
      }
      if (this.activeName == 'first') {
        this.onSubmit()
      } else if (this.activeName == 'third') {
        this.DailySubmit()
      } else if (this.activeName == 'second') {
        this.DetailsonSubmit()
      }
    },
    rowClick(row) {
      console.log(row)
      this.groupGuid = row.groupGuid

      if (this.activeName == 'first') {
        this.onSubmit()
      } else if (this.activeName == 'third') {
        this.DailySubmit()
      } else if (this.activeName == 'second') {
        this.DetailsonSubmit()
      }
    },
    /**
     * 分组用水汇总
     */
    // 分组用水汇总表格重新渲染
    checkboxChanged() {
      this.$nextTick(() => {
        this.$refs['table'].doLayout()
      })
    },
    // 分组用水汇总查询
    async onSubmit() {
      this.searchInfo = {}
      this.pageNum = 1
      this.searchInfo.unitGuid = this.changeschoolid
      // if (this.startDate != null && this.startDate != '') {
      //   this.searchInfo.startDate = this.startDate
      // }
      // if (this.endDate != null && this.endDate != '') {
      //   this.searchInfo.endDate = this.endDate
      // }
      // if (this.startTime != null && this.startTime != '') {
      //   this.searchInfo.startTime = this.startTime
      // }
      // if (this.endTime != null && this.endTime != '') {
      //   this.searchInfo.endTime = this.endTime
      // }
      this.searchInfo.startTime = this.startDate + ' ' + this.startTime
      this.searchInfo.endTime = this.endDate + ' ' + this.endTime
      if (this.groupGuid !== null || this.groupGuid !== '') {
        this.searchInfo.groupGuid = this.groupGuid
      }
      this.searchInfo.timeType = this.radio
      this.detailsTotal = null
      this.detailsTotal = await this.getTotal()
      this.getwaterdatagroup()
    },
    // 获取分组用水汇总合计数据
    getTotal() {
      let _this = this
      _this.loading = true
      return new Promise(function(resolve, reject) {
        _this
          .$http({
            url: _this.$http.adornUrl('/terminal/water/water-data-group-total'),
            method: 'post',
            data: _this.$http.adornData({
              messageContent: _this.searchInfo,
              messageType: 0
            })
          })
          .then(({ data }) => {
            _this.loading = false
            if (data.messageCode == 200) {
              resolve(data.messageContent)
            } else {
              reject(data.errorMessage)
              this.$message.error(data.errorMessage)
            }
          })
      })
    },
    //获取分组汇总分页
    getwaterdatagroup() {
      this.loading = true
      this.$http({
        url: this.$http.adornUrl('/terminal/water/water-data-group-page'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            searchInfo: this.searchInfo
          },
          messageType: 0
        })
      }).then(({ data }) => {
        this.loading = false
        if (data.messageCode == 200) {
          this.detailslist = data.messageContent.data
          this.recordCount = data.messageContent.recordCount
          this.currentPage = data.messageContent.pageNum
          if (data.messageContent.data.length != 0) {
            this.detailslist.push({
              ...this.detailsTotal,
              expenditureMax: '',
              expenditureMin: '',
              waterAmountMax: '',
              waterAmountMin: ''
            })
          } else {
            this.$message({
              message: '查询成功当前暂无数据',
              type: 'success'
            })
          }
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    async onExport(type) {
      if (this.detailslist.length == 0) {
        this.$message({
          message: '请查询数据后,在进行此操作',
          type: 'warning'
        })
        return false
      }
      await this.getwaterAll()
      if (type == 'print') {
        this.printWaterDailyJS()
      } else {
        this.export2Excel()
      }
    },
    // 获取所有分组用水汇总数据
    getwaterAll() {
      let _this = this
      return new Promise(function(resolve, reject) {
        _this
          .$http({
            url: _this.$http.adornUrl('/terminal/water/water-data-group-page'),
            method: 'post',
            data: _this.$http.adornData({
              messageContent: {
                pageNum: 1,
                pageSize: _this.recordCount,
                searchInfo: _this.searchInfo
              },
              messageType: 0
            })
          })
          .then(({ data }) => {
            if (data.messageCode == 200) {
              _this.exportlist = data.messageContent.data
              _this.exportlist.push({
                ..._this.detailsTotal,
                expenditureMax: '',
                expenditureMin: '',
                waterAmountMax: '',
                waterAmountMin: ''
              })
              _this.exportlist.map(item => {
                item.expenditureSum = _this.amountyua(item.expenditureSum)
                item.expenditureMax = _this.amountyua(item.expenditureMax)
                item.expenditureMin = _this.amountyua(item.expenditureMin)
              })
              resolve(_this.exportlist)

              // setTimeout(() => {
              //   _this.export2Excel();
              // }, 100);
            } else {
              _this.$message.error(data.errorMessage)
              reject(data.errorMessage)
            }
          })
      })
    },
    // 打印相关
    printWaterDailyJS() {
      let someJSONdata = this.exportlist
      const title = '身份/分组用水汇总表'
      this.unitName = sessionStorage.getItem('unitName')
      this.loginName = sessionStorage.getItem('username')
      const properties = []
      for (let key in this.formThead) {
        if (this.formThead[key].checked) {
          console.log(Object.keys(this.formThead).length)
          properties.push({
            displayName: this.formThead[key].label,
            field: this.formThead[key].prop
          })
        }
      }
      // 打印
      this.$printJS({
        // 眉头
        documentTitle: `${this.unitName}`,
        /**
         * 获取表头的信息
         * @param {*} title 表名
         * @param {*} unitName 单位
         * @param {*} time 时间
         */
        header: this.printHeader(
          title,
          this.unitName,
          `${this.formatDate(
            new Date(this.searchInfo.startTime),
            'yyyy-MM-dd'
          )} 至 ${this.formatDate(
            new Date(this.searchInfo.endTime),
            'yyyy-MM-dd'
          )}`
        ),
        printable: someJSONdata,
        properties: properties,
        type: 'json',
        // 是否每页都显示头部
        // repeatTableHeader:false,
        headerRow: 2,
        /**
         * 获取页脚的信息
         * @param {*} loginName 制表人：
         * @param {*} time 时间
         */
        endPage: this.printFloor(
          this.loginName,
          this.getNowTime('yy-mm-dd hh:mm:ss')
        ),
        //  获取页脚的信息样式
        style: this.printFloorStyle()
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        })
      )
    },
    export2Excel() {
      const nowtime = this.getimeto()
      require.ensure([], () => {
        const { export_json_to_excel } = require('../../excel/Export2Excel')
        const multiHeader = []
        const multiHeader2 = []
        const merges = []
        let tHeaderarr = []
        for (let key in this.formThead) {
          if (this.formThead[key].checked) {
            tHeaderarr.push(this.formThead[key].label)
          }
        }
        const tHeader = tHeaderarr
        //
        let filterValArr = []
        for (let key in this.formThead) {
          if (this.formThead[key].checked) {
            filterValArr.push(this.formThead[key].prop)
          }
        }
        const filterVal = filterValArr
        const list = this.exportlist
        const data = this.formatJson(filterVal, list)
        export_json_to_excel({
          multiHeader, //这里是第一行的表头
          multiHeader2, //这里是第二行的表头
          header: tHeader, //这里应该是算第三行的表头
          data,
          merges,
          filename: this.filename + nowtime
        })
      })
    },
    /**
     * 每日用水
     */
    checkboxChanged3() {
      this.$nextTick(() => {
        this.$refs['detailslist3'].doLayout()
      })
    },
    // 每日用水查询
    async DailySubmit() {
      this.searchInfo3 = {}
      this.pageNum3 = 1
      this.searchInfo3.unitGuid = this.changeschoolid
      // if (this.startDate != null && this.startDate != '') {
      //   this.searchInfo3.startDate = this.startDate
      // }
      // if (this.endDate != null && this.endDate != '') {
      //   this.searchInfo3.endDate = this.endDate
      // }
      // if (this.startTime != null && this.startTime != '') {
      //   this.searchInfo3.startTime = this.startTime
      // }
      // if (this.endTime != null && this.endTime != '') {
      //   this.searchInfo3.endTime = this.endTime
      // }
      this.searchInfo3.startTime = this.startDate + ' ' + this.startTime
      this.searchInfo3.endTime = this.endDate + ' ' + this.endTime
      if (this.departmentGuid !== null || this.departmentGuid !== '') {
        this.searchInfo3.departmentGuid = this.departmentGuid
      }
      this.searchInfo3.timeType = this.radio
      this.detailsDailyTotal = null
      this.detailsDailyTotal = await this.getDailyTotal()
      this.getDailydetailslist()
    },
    // 获取每日用水汇总合计数据
    getDailyTotal() {
      let _this = this
      _this.loading = true
      return new Promise(function(resolve, reject) {
        _this
          .$http({
            url: _this.$http.adornUrl(
              '/terminal/water/water-ever-day-gather-group-total'
            ),
            method: 'post',
            data: _this.$http.adornData({
              messageContent: _this.searchInfo3,
              messageType: 0
            })
          })
          .then(({ data }) => {
            _this.loading = false
            if (data.messageCode == 200) {
              resolve(data.messageContent)
            } else {
              reject(data.errorMessage)
              this.$message.error(data.errorMessage)
            }
          })
      })
    },
    // 每日用水查询
    getDailydetailslist() {
      this.loading3 = true
      this.$http({
        url: this.$http.adornUrl(
          '/terminal/water/water-ever-day-gather-group-page'
        ),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            pageNum: this.pageNum3,
            pageSize: this.pageSize3,
            searchInfo: this.searchInfo3
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.loading3 = false
          if (data.messageContent.data.length == 0) {
            this.$message({
              message: '查询成功当前暂无数据',
              type: 'success'
            })
          }
          this.detailslist3 = data.messageContent.data || []
          this.recordCount3 = data.messageContent.recordCount
          this.currentPage3 = data.messageContent.pageNum
          this.detailslist3.push({
            ...this.detailsDailyTotal,
            expenditureMax: '',
            expenditureMin: '',
            waterAmountMax: '',
            waterAmountMin: ''
          })
          this.headerArr = []
          for (var i = 0; i < this.detailslist3.length; i++) {
            this.detailslist3[i].id = 'aa' + [i].toString()
            this.headerArr.push(this.detailslist3[i])
            if (
              this.detailslist3[i].dayList != null &&
              this.detailslist3[i].dayList.length != 0
            ) {
              for (var j = 0; j < this.detailslist3[i].dayList.length; j++) {
                this.headerArr.push(this.detailslist3[i].dayList[j])
                this.detailslist3[i].dayList[j].id =
                  'ab' + i.toString() + 'a' + j.toString()
              }
            }
          }
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 每日用水导出或打印
    async onDailyExport(type) {
      if (this.detailslist3.length == 0) {
        this.$message({
          message: '请查询数据后,在进行此操作',
          type: 'warning'
        })
        return false
      }
      await this.getDailyExport()
      if (type == 'print') {
        this.printDailyJS()
      } else {
        this.exportDailyExcel()
      }
    },

    // 打印相关
    printDailyJS() {
      let someJSONdata = this.DailyExportlist
      const title = '身份/分组每日用水汇总表'
      this.unitName = sessionStorage.getItem('unitName')
      this.loginName = sessionStorage.getItem('username')
      const properties = []
      for (let key in this.formThead3) {
        if (this.formThead3[key].checked) {
          console.log(Object.keys(this.formThead3).length)
          if (this.formThead3[key].prop == 'dataMakeTime') {
            properties.push({
              displayName: this.formThead3[key].label,
              field: this.formThead3[key].prop,
              columnSize: 150 / (Object.keys(this.formThead3).length + 1) + '%'
            })
          } else {
            properties.push({
              displayName: this.formThead3[key].label,
              field: this.formThead3[key].prop,
              columnSize: 100 / (Object.keys(this.formThead3).length + 1) + '%'
            })
          }
        }
      }
      // 打印
      this.$printJS({
        // 眉头
        documentTitle: `${this.unitName}`,
        /**
         * 获取表头的信息
         * @param {*} title 表名
         * @param {*} unitName 单位
         * @param {*} time 时间
         */
        header: this.printHeader(
          title,
          this.unitName,
          `${this.formatDate(
            new Date(this.searchInfo3.startDate),
            'yyyy-MM-dd'
          )} 至 ${this.formatDate(
            new Date(this.searchInfo3.endDate),
            'yyyy-MM-dd'
          )}`
        ),
        printable: someJSONdata,
        properties: properties,
        type: 'json',
        // 是否每页都显示头部
        // repeatTableHeader:false,
        headerRow: 2,
        /**
         * 获取页脚的信息
         * @param {*} loginName 制表人：
         * @param {*} time 时间
         */
        endPage: this.printFloor(
          this.loginName,
          this.getNowTime('yy-mm-dd hh:mm:ss')
        ),
        //  获取页脚的信息样式
        style: this.printFloorStyle()
      })
    },
    // 获取到所有数据
    getDailyExport() {
      let _this = this
      return new Promise(function(resolve, reject) {
        _this
          .$http({
            url: _this.$http.adornUrl(
              '/terminal/water/water-ever-day-gather-group-page'
            ),
            method: 'post',
            data: _this.$http.adornData({
              messageContent: {
                pageNum: 1,
                pageSize: _this.recordCount3,
                searchInfo: _this.searchInfo3
              },
              messageType: _this.messageType
            })
          })
          .then(({ data }) => {
            if (data.messageCode === 200) {
              // _this.DailyExportlist = data.messageContent.data;
              _this.DailyExportlist = []
              data.messageContent.data.map(item => {
                _this.DailyExportlist.push(item)
                if (item.dayList.length != 0) {
                  item.dayList.map(Citem => {
                    _this.DailyExportlist.push(Citem)
                  })
                }
              })
              _this.DailyExportlist.push({
                ..._this.detailsDailyTotal,
                expenditureMax: '',
                expenditureMin: '',
                waterAmountMax: '',
                waterAmountMin: ''
              })
              _this.DailyExportlist.map(item => {
                item.expenditureSum = _this.amountyua(item.expenditureSum)
                item.expenditureMax = _this.amountyua(item.expenditureMax)
                item.expenditureMin = _this.amountyua(item.expenditureMin)
              })

              resolve(_this.DailyExportlist)
            } else {
              reject(data.errorMessage)
              _this.$message.error(data.errorMessage)
            }
          })
      })
    },
    exportDailyExcel() {
      const nowtime = this.getimeto()
      require.ensure([], () => {
        const { export_json_to_excel } = require('../../excel/Export2Excel')
        const multiHeader = []
        const multiHeader2 = []
        const merges = []
        let tHeaderarr = []
        let filterValArr = []
        for (let key in this.formThead3) {
          if (this.formThead3[key].checked) {
            tHeaderarr.push(this.formThead3[key].label)
            filterValArr.push(this.formThead3[key].prop)
          }
        }
        const tHeader = tHeaderarr

        const filterVal = filterValArr
        const list = this.DailyExportlist
        const data = this.formatJson(filterVal, list)
        export_json_to_excel({
          multiHeader, //这里是第一行的表头
          multiHeader2, //这里是第二行的表头
          header: tHeader, //这里应该是算第三行的表头
          data,
          merges,
          filename: this.filename3 + nowtime
        })
      })
    },
    handleSizeChange3(val) {
      this.pageSize3 = val
      this.getDailydetailslist()
    },
    handleCurrentChangepage3(val) {
      this.pageNum3 = val
      this.getDailydetailslist()
    },
    /**
     * 分组用水明细
     */
    // 分组用水明细表格重新渲染
    checkboxChanged2() {
      this.$nextTick(() => {
        this.$refs['detailslist2'].doLayout()
      })
    },
    // 分组用水明细查询
    async DetailsonSubmit() {
      this.searchInfo2 = {}
      this.pageNum2 = 1
      this.searchInfo2.unitGuid = this.changeschoolid
      // if (this.startDate != null && this.startDate != '') {
      //   this.searchInfo2.startDate = this.startDate
      // }
      // if (this.endDate != null && this.endDate != '') {
      //   this.searchInfo2.endDate = this.endDate
      // }
      // if (this.startTime != null && this.startTime != '') {
      //   this.searchInfo2.startTime = this.startTime
      // }
      // if (this.endTime != null && this.endTime != '') {
      //   this.searchInfo2.endTime = this.endTime
      // }
      this.searchInfo2.startTime = this.startDate + ' ' + this.startTime
      this.searchInfo2.endTime = this.endDate + ' ' + this.endTime
      if (this.groupGuid !== null || this.groupGuid !== '') {
        this.searchInfo2.groupGuid = this.groupGuid
      }
      this.searchInfo2.timeType = this.radio
      this.ermainaldeTotal = null
      this.ermainaldeTotal = await this.getTermainaldeTotal()
      this.gettermainaldetailslist()
    },
    // 获取区域用水明细合计数据
    getTermainaldeTotal() {
      let _this = this
      _this.loading2 = true
      return new Promise(function(resolve, reject) {
        _this
          .$http({
            url: _this.$http.adornUrl(
              '/terminal/water/water-terminal-details-total'
            ),
            method: 'post',
            data: _this.$http.adornData({
              messageContent: _this.searchInfo2,
              messageType: 0
            })
          })
          .then(({ data }) => {
            _this.loading2 = false
            if (data.messageCode == 200) {
              resolve(data.messageContent)
            } else {
              reject(data.errorMessage)
              this.$message.error(data.errorMessage)
            }
          })
      })
    },
    // 获取区域用水明细数据
    gettermainaldetailslist() {
      this.searchInfo.unitGuid = this.unitGuid
      this.loading2 = true
      this.$http({
        url: this.$http.adornUrl('/terminal/water/water-terminal-details-list'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            pageNum: this.pageNum2,
            pageSize: this.pageSize2,
            searchInfo: this.searchInfo2
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.loading2 = false
          console.log(data)
          this.detailslist2 = data.messageContent.data
          this.recordCount2 = data.messageContent.recordCount
          this.currentPage2 = data.messageContent.pageNum
          if (data.messageContent.data.length != 0) {
            this.detailslist2.push({
              ...this.ermainaldeTotal,
              newBalance: ''
            })
          } else {
            this.$message({
              message: '查询成功当前暂无数据',
              type: 'success'
            })
          }
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    async DetailsonExport(type) {
      if (this.detailslist2.length == 0) {
        this.$message({
          message: '请查询数据后,在进行此操作',
          type: 'warning'
        })
        return false
      }
      await this.getexportlist2()
      if (type == 'print') {
        this.printExportlisJS()
      } else {
        this.export2Excel2()
      }
    },
    // 打印相关
    printExportlisJS() {
      let someJSONdata = this.exportlist2
      const title = '身份/分组用水明细表'
      this.unitName = sessionStorage.getItem('unitName')
      this.loginName = sessionStorage.getItem('username')
      const properties = []
      for (let key in this.formThead2) {
        if (this.formThead2[key].checked) {
          if (this.formThead2[key].prop == 'dataMakeTime') {
            properties.push({
              displayName: this.formThead2[key].label,
              field: this.formThead2[key].prop,
              columnSize: 150 / (Object.keys(this.formThead2).length + 1) + '%'
            })
          } else {
            properties.push({
              displayName: this.formThead2[key].label,
              field: this.formThead2[key].prop,
              columnSize: 100 / (Object.keys(this.formThead2).length + 1) + '%'
            })
          }
        }
      }
      // 打印
      this.$printJS({
        // 眉头
        documentTitle: `${this.unitName}`,
        /**
         * 获取表头的信息
         * @param {*} title 表名
         * @param {*} unitName 单位
         * @param {*} time 时间
         */
        header: this.printHeader(
          title,
          this.unitName,
          `${this.formatDate(
            new Date(this.searchInfo2.startDate),
            'yyyy-MM-dd'
          )} 至 ${this.formatDate(
            new Date(this.searchInfo2.endDate),
            'yyyy-MM-dd'
          )}`
        ),
        printable: someJSONdata,
        properties: properties,
        type: 'json',
        // 是否每页都显示头部
        // repeatTableHeader:false,
        headerRow: 2,
        /**
         * 获取页脚的信息
         * @param {*} loginName 制表人：
         * @param {*} time 时间
         */
        endPage: this.printFloor(
          this.loginName,
          this.getNowTime('yy-mm-dd hh:mm:ss')
        ),
        //  获取页脚的信息样式
        style: this.printFloorStyle()
      })
    },
    // 导出
    getexportlist2() {
      let _this = this
      return new Promise(function(resolve, reject) {
        _this
          .$http({
            url: _this.$http.adornUrl(
              '/terminal/water/water-terminal-details-list'
            ),
            method: 'post',
            data: _this.$http.adornData({
              messageContent: {
                pageNum: 1,
                pageSize: _this.recordCount2,
                searchInfo: _this.searchInfo2
              },
              messageType: 0
            })
          })
          .then(({ data }) => {
            if (data.messageCode == 200) {
              _this.exportlist2 = data.messageContent.data
              if (data.messageContent.data.length != 0) {
                _this.exportlist2.push({
                  ..._this.ermainaldeTotal,
                  newBalance: ''
                })
              } else {
                _this.$message({
                  message: '查询成功当前暂无数据',
                  type: 'success'
                })
              }
              for (var i = 0; i < _this.exportlist2.length; i++) {
                if (_this.exportlist2[i].pulseFlag == 0) {
                  _this.exportlist2[i].pulseFlag = '是'
                }
                if (_this.exportlist2[i].pulseFlag == 1) {
                  _this.exportlist2[i].pulseFlag = '否'
                }
                // 交易类型
                _this.exportlist2[i].useType = _this.filterchargingType(
                  _this.exportlist2[i].useType
                )
                _this.exportlist2[i].expenditure = _this.amountyua(
                  _this.exportlist2[i].expenditure
                )
                _this.exportlist2[i].newBalance = _this.amountyua(
                  _this.exportlist2[i].newBalance
                )
              }
              // setTimeout(() => {
              //   _this.export2Excel2();
              // }, 100);
              resolve(_this.exportlist2)
            } else {
              _this.$message.error(data.errorMessage)
              reject(data.errorMessage)
            }
          })
      })
    },
    export2Excel2() {
      const nowtime = this.getimeto()
      require.ensure([], () => {
        const { export_json_to_excel } = require('../../excel/Export2Excel')
        const multiHeader = []
        const multiHeader2 = []
        const merges = []
        let tHeaderarr = []
        for (let key in this.formThead2) {
          if (this.formThead2[key].checked) {
            tHeaderarr.push(this.formThead2[key].label)
          }
        }
        const tHeader = tHeaderarr
        //
        let filterValArr = []
        for (let key in this.formThead2) {
          if (this.formThead2[key].checked) {
            filterValArr.push(this.formThead2[key].prop)
          }
        }
        const filterVal = filterValArr
        const list = this.exportlist2
        const data = this.formatJson(filterVal, list)
        export_json_to_excel({
          multiHeader, //这里是第一行的表头
          multiHeader2, //这里是第二行的表头
          header: tHeader, //这里应该是算第三行的表头
          data,
          merges,
          filename: this.filename2 + nowtime
        })
      })
    },
    //
    handleSizeChange2(val) {
      this.pageSize2 = val
      this.gettermainaldetailslist()
    },
    handleCurrentChangepage2(val) {
      this.pageNum2 = val
      this.gettermainaldetailslist()
    }
  }
}
</script>

<style lang="scss" scoped>
.el-radio + .el-radio {
  margin-left: 0;
}
.grouping_water {
  padding: 0 10px;
  //滚动条的宽度
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  //滚动条的滑块
  ::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 3px;
  }
  .regional_water .demo-form-inline .el-date-editor.el-input {
    width: 100px;
  }
  .demo-form-inline,
  .demo-form-inline1 {
    // width: 1234px;
    padding-left: 10px;
    /deep/.el-form-item__label {
    }
    .el-form-item {
      margin-bottom: 5px;
    }
    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 340px;
    }
  }
  .demo-form-inline1 {
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
  }
  .all_left {
    .bg-purple {
      padding: 0 10px;
      .header_title {
        //   padding-top: 20px;
        padding-bottom: 10px;
        font-weight: bolder;
        text-align: center;
        border-bottom: 1px solid #e5e9f2;
        color: #909399;
        .boxone {
          .el-radio + .el-radio {
            margin-left: 0px;
          }
        }
        .boxtwo {
          padding-top: 15px;
        }
      }
      .tree_list {
        width: 100%;
        .custom-tree-node {
          padding-left: 10px;
          font-size: 16px;
          .colorfont {
            color: #17b3a3;
          }
        }
      }
    }
  }
  .all_right {
    height: calc(100vh - 130px);
    overflow: auto;
    &::-webkit-scrollbar {
      width: 0;
      height: 0;
      background-color: transparent;
    }
  }
  .page {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>